<template>
  <div class="mainHeader" ref="mainHeader" :style="{'marginLeft': collapsed ? '80px' : '200px'}">
    <MenuUnfoldOutlined v-if="collapsed" class="toggleIcon" @click="handleClickCollapsedFun" />
    <MenuFoldOutlined v-else class="toggleIcon" @click="handleClickCollapsedFun" />
     <div class="userInfos">
      <a-dropdown :trigger="['click']">
        <span class="el-dropdown-link">
          <span class="userName">{{ username }}</span>
          <a-avatar src="https://i.gtimg.cn/club/item/face/img/2/15922_100.gif" />
        </span>
        <template #overlay>
          <a-menu class="userDropdownList" @click="handleClickMenu">
            <a-menu-item key="goBack"><PoweroffOutlined />退出</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
     </div>
  </div>
</template>

<script lang="ts" setup>
  import { h, ref, watch } from "vue";
  import { message, Modal } from 'ant-design-vue';
  import { 
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    ExpandOutlined,
    PoweroffOutlined,
    QuestionCircleOutlined
  } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import { storeToRefs } from 'pinia'
  import { useUserStore } from '@/store/user';
  import { useRouterStore } from '@/store/router';
  import { Logout } from "@/api";

  const router = useRouter();
  const userStore = useUserStore();
  const routerStore = useRouterStore();
  const { collapsed, username, contentWidth } = storeToRefs(userStore);
  
  const mainHeader = ref<any>();

  const handleClickCollapsedFun = () => {
    collapsed.value = !collapsed.value;
  }

  // 解决左侧导航改变,echarts绘制出错的问题
  watch(collapsed, (newValue, oldValue)=>{
    setTimeout(() => {
      contentWidth.value = mainHeader.value?.offsetWidth
    })
  })

  const handleClickMenu = (e:any) => {
    if(e.key === 'goBack'){
      Modal.confirm({
        title: '提示',
        icon: h(QuestionCircleOutlined),
        content: '确定要退出当前系统用户吗?',
        okText: '确定',
        onOk() {
          LogoutFun();
        },
        onCancel() {
          message.warning('已取消退出');
        },
      });
    }
  }

  const LogoutFun = async () => {
    const res = await Logout();
    if(res) {
      if(res.code === 1000) {
        userStore.$reset();
        routerStore.$reset();
        sessionStorage.clear();
        router.push({path: '/'});
        message.success(res.data);
      } else {
        message.error(res.msg);
      }
    }
  }
</script>

<style lang="scss" scoped>
.mainHeader {
    display: flex;
    justify-content: space-between;
    height: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #E5E6EB;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 60px;
    z-index: 1;
    .toggleIcon {
      font-size: 18px;
      margin: 0 10px;
      cursor: pointer;
      line-height: inherit;
    }
    .el-dropdown-link {
      cursor: pointer;
    }
    .userName {
      padding: 0 10px;
    }
    .userInfos {
      margin-right: 20px;
      height: 60px;
      line-height: 60px;
    }
}
</style>